<template>
  <div v-dialog-drag>
    <el-dialog
      title='报告配置'
      :visible.sync='showFlag'
      width='45%'
      :before-close='close'
    >
      <div class='configureBox'>
        <!-- 左侧树形图 -->
        <div class='left'>
          <el-card shadow='never'>
            <div class='h500'>
              <el-tree
                ref='tree'
                :data='treeData'
                show-checkbox
                default-expand-all
                empty-text='暂无配置项'
                node-key='id'
                highlight-current
                :props='defaultProps'
                :default-checked-keys='defaultChecked'
                @check='handleCheck'
              />
            </div>
          </el-card>
        </div>
        <div class='right'>
          <el-form label-width='130px' style='width: 100%;'>
            <!-- 封面 -->
            <el-card shadow='never' class='mb10'>
              <div class='title'>封面</div>
              <el-form-item label='报告类型'>
                <el-input
                  v-model='detail.type'
                  size='mini'
                  placeholder='请输入报告类型'
                />
              </el-form-item>
              <el-form-item label='批准人'>
                <el-input v-model='detail.approver' size='mini' placeholder='请输入批准人' />
              </el-form-item>
              <el-form-item label='审核人'>
                <el-input v-model='detail.auditor' size='mini' placeholder='请输入审核人' />
              </el-form-item>
            </el-card>

            <template v-for='(item) in treeData'>
              <!-- 项目概况 -->
              <el-card
                v-if='item.is_describe === 1 && checkedData.indexOf(item.id) !== -1'
                :key='item.id'
                shadow='never'
                class='mb10'
              >
                <div class='title'>{{ item.name }}</div>
                <el-form-item label='序言'>
                  <el-input v-model='item.inputValue' rows='3' type='textarea' size='mini' placeholder='请输入内容' />
                </el-form-item>
              </el-card>
              <!-- 用电安全分析 -->
              <el-card
                v-if='item.is_describe === 0 &&( checkedData.indexOf(item.id) !== -1 || handleData(item.children))'
                :key='item.id'
                shadow='never'
                class='mb10'
              >
                <div class='title'>{{ item.name }}</div>
                <template v-for='item1 in item.children'>
                  <el-form-item
                    v-if='checkedData.indexOf(item.id) !== -1 || checkedData.indexOf(item1.id) !== -1'
                    :key='item1.id'
                    :label='item1.name'
                  >
                    <el-button type='primary' size='mini' @click='openConfigure(item1.id,item1.level)'><i
                      class='el-icon-upload el-icon--right'
                    />数据源配置
                    </el-button>
                  </el-form-item>
                </template>

              </el-card>
            </template>
          </el-form>
        </div>
      </div>
      <span slot='footer' class='dialog-footer'>
        <el-button size='mini' @click='close'>取消</el-button>
        <el-button type='primary' size='mini' @click='confirm'>确定</el-button>
      </span>
      <DataConfigure
        ref='dataConfigure'
        :station-id='station_id'
        :report-id='report_id'
        :confing-id='config_id'
        :level='level'
      />
    </el-dialog>
  </div>
</template>

<script>
import DataConfigure from './dataConfigure'
import { allConfigure, configDetail, addConfig } from '@/api/report'

export default {
  name: 'configure',
  components: {
    DataConfigure,
  },
  props: ['report_id', 'station_id'],
  data() {
    return {
      input: '',
      showFlag: false,
      treeData: [], // 左侧树形图数据
      checkedData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      //  基础配置项
      detail: {
        type: '',
        approver: '',
        auditor: '',
      },
      defaultChecked: [],
      // 当前数据源配置 id
      config_id: null,
      //  等级
      level: null,
    }
  },
  created() {
    this.getAllConfigure()
  },
  methods: {
    /**
     * @description: 处理数据
     * @author: qyc
     */
    handleData(arr) {
      // 有子级的情况
      if (arr.length > 0) {
        let status = false
        arr.forEach(item => {
          this.checkedData.indexOf(item.id) !== -1 ? status = true : ''
        })
        return status
      }
      return false
    },

    /**
     * @description: 报告配置详情
     * @author: qyc
     */
    handleConfigDetail() {
      configDetail({ report_id: this.report_id }).then(res => {
        this.detail.type = res.data.data.type
        this.detail.approver = res.data.data.approver
        this.detail.auditor = res.data.data.auditor
        this.defaultChecked = res.data.data.config_ids
        this.checkedData = res.data.data.config_ids
        this.treeData.forEach(item => {
          item.is_describe === 1 ? res.data.data.report_config.forEach(item1 => {
            item1.config_id === item.id ? item.inputValue = item1.describe_before : ''
          }) : ''
        })
      })
    },

    /**
     * @description: 左侧树形图check事件
     * @author: qyc
     */
    handleCheck() {
      this.checkedData = this.$refs.tree.getCheckedKeys(true, false)
    },
    /**
     * @description: 获取左侧全部配置项
     * @author: qyc
     */
    getAllConfigure() {
      allConfigure().then(res => {
        const arr = res.data.data
        arr.forEach(item => {
          item.is_describe === 1 ? item['inputValue'] = '' : ''
        })
        this.treeData = res.data.data
        // 如果没有第二级数据，第一级禁用
        // this.treeData.forEach((item, index, arr) => {
        //   if (item.children.length === 0) {
        //     arr[index].disabled = true
        //   }
        // })
      })
    },
    openConfigure(id, level) {
      this.config_id = id
      this.level = level
      setTimeout(() => {
        this.$refs['dataConfigure'].open()
      }, 100)
    },
    open() {
      // 清空 tree 组件选中
      this.report_id && this.handleConfigDetail()
      this.showFlag = true
    },
    /**
     * @description: 配置保存
     * @author: qyc
     */
    confirm() {
      const data = {
        report_id: this.report_id,
        type: this.detail.type,
        approver: this.detail.approver,
        auditor: this.detail.auditor,
        report_config: [],
      }
      // treeData 递归 查找
      this.recursiveTree(data.report_config, this.treeData)

      addConfig(data).then(() => {
        this.close()
        this.$message({
          message: '报告配置成功',
          type: 'success',
        })
      }).catch(() => {
      })
    },
    /**
     * @description: 递归 tree 数据
     * @author: qyc
     */
    recursiveTree(reportConfig = [], list) {
      for (const item of list) {
        const { children, is_describe, id } = item
        this.checkedData.indexOf(id) !== -1 ? is_describe === 1 ? reportConfig.push({
          config_id: item.id,
          describe_before: item.inputValue,
        }) : reportConfig.push({ config_id: item.id, describe_before: '' }) : ''
        Array.isArray(children) && children.length ? this.recursiveTree(reportConfig, children) : ''
      }
    },
    close() {
      this.showFlag = false
      this.$refs.tree.setCheckedKeys([])
    },

  },

}
</script>

<style lang='scss' scoped>
::v-deep.el-dialog__body {
  padding: 3px 30px;
  overflow-y: auto;

}

.mb10 {
  margin-bottom: 10px;
}

.w100 {
  width: 100%;
}

.el-form-item {
  margin-bottom: 0;
}

.configureBox {
  display: flex;
  justify-content: space-between;

  .left {
    width: 40%;
    height: 500px;
    overflow-y: auto;
  }

  .right {
    width: 59%;
    height: 500px;
    overflow-y: auto;
  }
}

.title {
  font-size: 13px;
  color: #353535;
  font-weight: bold;
}

.h500 {
  height: 450px;
  overflow-y: auto;
}

.h500::-webkit-scrollbar {
  display: none;
}
</style>
